<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
<style>
     .big-box{
         width: 300px;
         margin: 0 auto;
         
     }
     .box,.small-box{
         display: flex;
     }
     .small-box section{
         display: none;
         width: 67px;
     }
     .second-box{
         position: fixed;
         left:calc(50% - 85px)

     }
     section p{
         cursor: pointer;
          border: 1px solid #000;
          border-top: none;
        margin: 0;
     }
     .box>li{
         cursor: pointer;
         border: 1px solid #000;
     }
      ul{
          padding: 0;
          margin: 0;
          list-style: none;
      }
      p:hover{
          background-color: #aaa;
      }
      span{
          display: inline-block;
          position: fixed;
          top: 100px;
      }

</style>
</head>
<body>
    <div class="big-box">
      <ul class="box">
        <li class="first">销售订单  
        </li>
        <li class="second">消费订单    
        </li>
    </ul>
    <div class="small-box">
       <section class="first-box">
              <p>销售一</p>
            <p>销售二</p>
            <p>销售三</p>
            </section>  
            <section class="second-box">
                <p>消费1</p>
                <p>消费2</p>
                <p>消费3</p>
            </section>
    </div>
     <span>000</span>
     
    </div>
    <script src="../0814/jquery.js"></script>
    
</body>
</html>
<script>
    $('.first').click(function(){
        $('.first-box').css('display','block')
    })
    $('.first-box p').each(function(){
        $(this).click(function(){
            $('.first-box').css('display','none')
            $('span').html($(this).html())
        })
    })
     $('.second').click(function(){
        $('.second-box').css('display','block')
    })
    $('.second-box p').each(function(){
        $(this).click(function(){
            $('.second-box').css('display','none')
            $('span').html($(this).html())
        })
    })
</script>